<template>
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            	<h4 class="modal-title" id="myModalLabel">新增/编辑员工</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal">
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">姓名<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="text" class="form-control" v-model="user.accountName" placeholder="请输入姓名">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">手机（帐号）<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="text" class="form-control" v-model="user.phone" placeholder="请输入手机、帐号">
	                  </div>
	                </div>
	                <div class="form-group" v-if="optType==='A'">
	                  <label for="" class="col-sm-4 control-label">密码<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="password" class="form-control" v-model="user.password" placeholder="请输入密码">
	                  </div>
	                </div>
	                <div class="form-group" v-if="optType==='A'">
	                  <label for="" class="col-sm-4 control-label">确认密码<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <input type="password" class="form-control" v-model="user.rePassword" placeholder="请确认密码">
	                  </div>
	                </div>
	                <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">状态<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <select class="form-control" v-model="user.status">
	                    	<option v-for="statusOption in statusOptions" v-bind:value="statusOption.value">{{ statusOption.text }}</option> 
	                    </select>
	                  </div>
	                </div>
	                  <div class="form-group">
	                  <label for="" class="col-sm-4 control-label">角色<label style="color: red;">*</label>：</label>
	                  <div class="col-sm-8">
	                    <select class="form-control" v-model="user.userRoleId">
	                    	<option v-for="row in roleResourceList" v-bind:value="row.id" >{{row.roleName}}</option>
	                    </select>
	                  </div>
	                </div>
	                
	                
	                
	                <input type="hidden" class="form-control" v-model="user.id" placeholder="用户主键">
	                <input type="hidden" class="form-control" v-model="optType" placeholder="当前操作类型">
	              </div>
          	</div>
          	<div class="modal-footer">
            	<!--<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>-->
            	<button type="button" class="btn checkedBtn" v-show="saveUserBtnShow" @click="saveUser">确定</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<script>
	export default{
		//接收父组件的绑定值
		props: ["userModal"],
		data() {
			return {
				//机构信息对象
				user: {
					deptId: '',
					id: '',
					accountName: '',
					phone: '',
					accountType: 1,
					status: '',
					password: '',
					userRoleId:'',
					rePassword: '',
				},
				optType: '',
				statusOptions: [
					{text: "在用", value: "1"},
					{text: "禁用", value: "0"}
				],
				roleResourceList:[],
				saveUserBtnShow: true
			}
		},
		watch: {
			//监听父组件绑定值是否改变
			userModal: {
				handler: function(val, oldVal){
					//初始化操作类型optType，控制密码框是否进行展示
					this.optType = this.userModal.optType;
					//初始化机构
					this.user.deptId = this.userModal.orgId;
					if('U'==this.optType){
						//当编辑员工时，不需要部门id,否则会更新掉原来的部门
						this.user.deptId = "";
					}
					this.initUser();
				},
				//深层监听，当位对象时，若设为true，属性变更时即可触发，若为false，属性无法监听到
				deep: true
			}
		},
		mounted: function() {
			this.initRoleResource();
		},
		methods: {
			//初始化机构信息
			initUser() {
				var _self = this;
				var userId = this.userModal.userId;
				var optType = this.userModal.optType;
				//存在机构ID,并且为修改操作时,根据ID加载一遍机构数据
				if(userId && "U" == optType){
					var params = {"id":userId};
					var body={};
					body.params = params;
			   		var url = _self.utilHelper.apiUrl + "/api/getUserById";
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
				   			var userData = data;
							_self.user.id = userData.id;
				   			_self.user.accountName = userData.accountName;
				   			_self.user.phone = userData.phone;
				   			_self.user.status = userData.status;
				   			_self.user.accountType = userData.accountType;
				   			_self.user.userRoleId = userData.userRoleId;
				  		}, (response) => {
				  	});
				}else{
					_self.user.id = "";
		   			_self.user.accountName = "";
		   			_self.user.password = "";
		   			_self.user.rePassword = "";
		   			_self.user.phone = "";
		   			_self.user.status = 1;
					_self.user.accountType = 1;
				}
			},
			saveUser() {
				var _self = this;
				var params = this.user;
				var optType = _self.optType;
				//执行新增或修改
				if(_self.userValidate()){
					var body = {};
					body.params = params;
					_self.saveUserBtnShow = false;
					var url = _self.utilHelper.apiUrl + "/api/editPartner";
					if(optType=="A"){
						//新增
						url = _self.utilHelper.apiUrl + "/api/addPartner";
					}
			   	 	_self.$http.post(url, body).then((response) => {
							var data = response.body.resData;
				   			var result = data.result;
				   			var resData = data.resultMsg;
							//输出操作信息
							if(result==1){
								layer.msg(resData, {
									time: 1000
								}, function(){
									_self.initUser();
									//关闭弹出层
									_self.saveUserBtnShow = true;
									$('#addUserModal').modal('hide');
									//子组件向父组件传递信号: 调用父组件中对子组件的监听
									_self.$emit('saveUserListener');
								});   	
							}else{
								layer.msg(resData, {
									time: 1000
								}, function(){
									_self.saveUserBtnShow = true;
								});   	
							}
				  		}, (response) => {
				  	});
			   		
				}
			},
			userValidate() {
				var accountName = this.user.accountName;
				var phone = this.user.phone;
				var password = this.user.password;
				var rePassword = this.user.rePassword;
				var userRoleId = this.user.userRoleId;
				if(!accountName){
					layer.msg("员工姓名不能为空",{
						time: 2000
					});
					return false;
				}
				if(!phone){
					layer.msg("手机号码不能为空",{
						time: 2000
					});
					return false;
				}else{
					var reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
					if(!reg.test(phone)){
						layer.msg("手机号码格式错误",{
							time: 2000
						});
						return false;
					}
				}
				if(!password && this.optType == 'A'){
					layer.msg("密码不能为空",{
						time: 2000
					});
					return false;
				}
				if(password && this.optType == 'A'){
					var reg = /^[a-zA-Z0-9~!@#$%^&*()-_+=`{}\[\]:;"'<>?,.\/\\]{8,20}$/;
					if(!reg.test(password)){
						layer.msg("密码为长度8-20位的数字、字母、下划线或常用字符(`~!@#$%^&*()-_+={}[]:;\"'<>?,.\/)",{
							time: 3000
						});
						return false;
					}
				}
				if(!rePassword && this.optType == 'A'){
					layer.msg("请填写确认密码",{
						time: 2000
					});
					return false;
				}
				if(password != rePassword && this.optType == 'A'){
					layer.msg("两次密码输入不一致",{
						time: 2000
					});
					return false;
				}
				if(!userRoleId){
					layer.msg("请选择角色",{
						time: 2000
					});
					return false;
				}
				return true;
			},
			initRoleResource:function(){
				var _self = this;
				var url = _self.utilHelper.apiUrl+"/api/getChannelRoleList";
				var params = {};
				var body = {};
				body.params=params
				_self.$http.post(url,body).then((response)=>{
					var data = response.body.resData;
					_self.roleResourceList = data.channelRoleList;
				});
			}
		}
	}
	
</script>